<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天地图WMTS服务展示地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .ol-mouse-position {
            background: #eeeeee;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:4326');
    projection.setExtent([-180, -90, 180, 90]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    const origins = [
        [-180.0, 90.0],
        ol.extent.getTopLeft(projectionExtent)
    ];
    const origin = origins[1];
    // console.log('extent:', projectionExtent);
    // console.log('origin:', origin);

    const size = ol.extent.getWidth(projectionExtent) / tileSize;

    const resolutions = new Array(18);
    const matrixIds = new Array(18);
    for (let z = 0; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }
    console.log(resolutions);
    console.log(matrixIds);

    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        // extent: projectionExtent,
        matrixIds: matrixIds
    });

    const url = `http://t0.tianditu.gov.cn/img_c/wmts?tk=4c1f905fb8eaac5743b30da9e0b3f347`;

    const wmtsSource = new ol.source.WMTS({
        url,
        layer: 'img',
        matrixSet: 'c',
        format: 'tiles',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default',
        wrapX: false
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    const url1 = `http://t{0-6}.tianditu.gov.cn/cia_c/wmts?tk=4c1f905fb8eaac5743b30da9e0b3f347`;

    const wmtsSource1 = new ol.source.WMTS({
        url: url1,
        layer: 'cia',
        matrixSet: 'c',
        format: 'tiles',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default',
        wrapX: false
    });
    // 图层
    const baseLayer1 = new ol.layer.Tile({
        source: wmtsSource1
    });

    // const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:4490');
    const points = [
        [0, 0],
        [116.384722, 39.889916],
        [119.97154785156252, 30.40197483062744]
    ];
    const centerPoint = points[2];

    const radius = 5000;

    const iconPoint3857 = ol.proj.transform([119.97154785156252, 30.40197483062744], 'EPSG:4326', 'EPSG:3857');

    const iconPoint4326 = ol.proj.transform([iconPoint3857[0] + radius, iconPoint3857[1]], 'EPSG:3857', 'EPSG:4326');

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(iconPoint4326)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            baseLayer1,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 13,
            maxZoom: 19,
            minZoom: 1,
            resolutions
        }),
        controls: ol.control.defaults().extend([
            new ol.control.MousePosition()
        ])
    });

    const metersPerUnit = map.getView().getProjection().getMetersPerUnit();

    // console.log(metersPerUnit);

    const realRadius = radius / metersPerUnit;

    const circleFeature = new ol.Feature({
        geometry: new ol.geom.Circle(centerPoint, realRadius * 1.145)
    });

    vectorSource.addFeature(circleFeature);

    map.on('pointermove', evt => {
        if (evt.dragging) return;
        let hit = map.hasFeatureAtPixel(map.getEventPixel(evt.originalEvent));
        map.getTargetElement().style.cursor = hit ? 'pointer' : 'default';
        // console.log(hit);
    });

</script>
</html>